<template>
  <a-tabs v-model:activeKey="activeKey">
    <a-tab-pane
      v-for="(item, index) in table.dataSource"
      :key="index"
      :tab="item.name + '(' + item.type + ')'"
    >
      <a-table
        :scroll="item.columns.length > 7 ? { x: 1000, y: 500 } : { y: 500 }"
        bordered
        size="small"
        :dataSource="item.dataSource"
        :columns="item.columns"
        style="margin-top: 8px"
      />
    </a-tab-pane>

    <template #rightExtra>
      <a-button
        type="primary"
        :ghost="true"
        style="margin-right: 10px"
        @click="handleOpenMergeModal"
      >
        开始合并
      </a-button>
      <a-button type="primary" style="margin-right: 10px" @click="() => uploadModalRef?.open?.()">
        上传文件
      </a-button>
      <a-button type="primary" danger style="margin-right: 10px" @click="handleReset">
        重置
      </a-button>
    </template>
  </a-tabs>

  <UploadModal ref="uploadModalRef" @ok="handleOk" />
  <MergeModal ref="mergeModalRef" @ok="() => {}" />
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import UploadModal from './UploadModal.vue'
import MergeModal from './MergeModal.vue'
import { message } from 'ant-design-vue'

const uploadModalRef = ref<any>(null)
const mergeModalRef = ref<any>(null)
const activeKey = ref(0)
const table = reactive<{ dataSource: any[] }>({
  dataSource: []
})

const handleOk = (data: any[]) => {
  table.dataSource = data
}

const handleReset = () => {
  location.reload()
}

const handleOpenMergeModal = () => {
  if (!table.dataSource.length) {
    message.error('请先上传文件')
    return
  }
  const columns = table.dataSource[0]?.columns
  const dataSource = [].concat(...table.dataSource.map((v) => v.dataSource))
  mergeModalRef?.value.open({
    columns,
    dataSource,
    originalData: table.dataSource
  })
}
</script>

<style lang="less" scoped></style>
